<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/dist/css/layui.css}"/>
    <link rel="icon" type="image/png" href="icon/I.png">
</head>
<style>
    table tr th {
        text-align: center !important;
        font-weight: bold !important;
    }

    tr td {
        text-align: center
    }
</style>
<body onload="getPhone()" style="background: rgb(241, 241, 241) !important;">
<div class="box1" style="width: 40%; margin: 0 auto">
    <!-- 下拉框第1点 -->
    <form class="layui-form">
        <table class="layui-table">
            <tr>
                <td align="right">原绑定手机号：</td>
                <td>
                    <input type="text" class=" layui-input" style="text-align: center" id="phone" readonly/>
                </td>
            </tr>
            <tr>
                <td align="right">输入缺少号码：</td>
                <td>
                    <input type="text" class="layui-input layui-inline" style="text-align: center" id="shuru"/>
                </td>
            </tr>
            <tr>
                <td colspan="8" align="center">
                    <button type="button" class="layui-btn layui-btn-normal " onclick="yanzheng()">下一步</button>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
<script th:src="@{/layui/src/layui.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/jquery.min.js}" type="text/javascript"></script>
<script>
    $("#captcha").click(function () {
        $("#captcha").hide()
        $("#num").show()
        var second = 30
        $("#num").text((second) + "秒")
        var interval = setInterval(function () {
            second--
            $("#num").text((second) + "秒")
            if (second === -1) {
                $("#captcha").text("重发验证码")
                clearInterval(interval)
                $("#num").hide()
                $("#captcha").show()
            }
        }, 1000)
    })

    //ajax请求-无参
    function ajaxForm(url, type, success) {
        $.ajax({
            url: url,
            type: type,
            dataType: "json",
            headers: {
                "token": localStorage.token
            },
            success: success,
            error: function (xhr) {
                alert("登录超时！");
                location.href = "/login";
            }
        });
    }

    //ajax请求-带参
    function ajaxFormWithArgs(url, type, args, success) {
        $.ajax({
            url: url,
            type: type,
            data: args,
            dataType: "json",
            headers: {
                "token": localStorage.token
            },
            success: success,
            error: function (xhr) {
                alert("请求出错：" + xhr.status);
            }
        });
    }

    function getPhone() {
        ajaxForm("view/getUserOfLogin", "get", function (dataA) {
            let phone = dataA.data.phone
            let strings = phone.substr(0, 3);
            strings += "****"
            let strings1 = phone.substr(7, 11)
            strings += strings1

            let pass = phone.substr(3, 4)
            $("#phone").attr("name", pass)
            $("#phone").val(strings)

        })
    }

    function yanzheng() {
        let daan = $("#phone").attr("name");
        let shuru = $("#shuru").val().trim();
        if (daan == shuru) {
            layer.msg('验证通过！');
            setTimeout("tiaozhuan()", "2500");

        } else {
            layer.msg('输入不正确，请重新输入！');
        }

    }

    function tiaozhuan() {
        location.href = "/xiugaimima"
    }
</script>
<!-- 下拉框第3点 -->
<script>
    layui.use('form', function () {
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

        //……

        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
        form.render();
    });
</script>
</html>
